<template>
  <div class="home">
    <div class="tip animated fadeOutDown" :class="{hide:tipHide}"></div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-main" data-hash="main" v-if="headderTip">
          <header class="animated flash"></header>
          <footer class="animated slideInUp"></footer>
        </div>
        <div class="swiper-slide swiper-slide-1" data-hash="slide1" v-if="headderTip">
          <header class="animated" :class="{rollIn:headderTip[0],show:headderTip[0]}"></header>
          <footer class="animated" :class="{slideInUp:footerTip[0],show:footerTip[0]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-2" data-hash="slide2">
          <header class="animated" :class="{fadeInLeft:headderTip[1]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[1]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-3" data-hash="slide3">
          <header class="animated" :class="{fadeInLeft:headderTip[2]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[2]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-4" data-hash="slide4">
          <header class="animated" :class="{fadeInLeft:headderTip[3]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[3]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-5" data-hash="slide5">
          <header class="animated" :class="{fadeInLeft:headderTip[4]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[4]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-6" data-hash="slide6">
          <header class="animated" :class="{fadeInLeft:headderTip[5]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[5]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-7" data-hash="slide7">
          <header class="animated" :class="{fadeInLeft:headderTip[6]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[6]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-8" data-hash="slide8">
          <header class="animated" :class="{fadeInLeft:headderTip[7]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[7]}"></footer>
        </div>
        <div class="swiper-slide swiper-slide-9" data-hash="slide9">
          <header class="animated" :class="{fadeInLeft:headderTip[8]}"></header>
          <footer class="animated" :class="{fadeInRight:footerTip[8]}"></footer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

// @ is an alias to /src
export default {
  name: 'home',
  data() {
    return {
      tipHide: 0,
      headderTip: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      footerTip: [0, 0, 0, 0, 0, 0, 0, 0, 0]
    }
  },
  components: {
  },
  created: async function (params) {

  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      let vm = this;
      var mySwiper = new Swiper('.swiper-container', {
        // autoplay: true,//可选选项，自动滑动
        direction: 'vertical',
        effect: 'coverflow',
        slidesPerView: 1,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
          slideChange: function (swiper) {
            // console.log(mySwiper.activeIndex);
            mySwiper.activeIndex !== 9 ? vm.tipHide = 0 : vm.tipHide = 1;
          },
          reachEnd: function () {
            vm.tipHide = 1;
          },
          // sliderMove: function () {
          //   vm.headderTip = 0;
          //   vm.footerTip = 0;
          // },
          slidePrevTransitionStart: function () {
            vm.headderTip = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            vm.footerTip = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            vm.$set(vm.headderTip, mySwiper.activeIndex - 1, 1);
            vm.$set(vm.footerTip, mySwiper.activeIndex - 1, 1);
            console.log(vm.headderTip);
          },
          slideNextTransitionEnd: function () {
            vm.headderTip = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            vm.footerTip = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            vm.$set(vm.headderTip, mySwiper.activeIndex - 1, 1);
            vm.$set(vm.footerTip, mySwiper.activeIndex - 1, 1);
            console.log(vm.headderTip);
          }
        },
      })
    }
  },
}
</script>
<style lang="less" scoped>
.hide {
  display: none !important;
}
.show,
.fadeInLeft,
.fadeInRight {
  visibility: visible !important;
}
.tip {
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  position: fixed;
  z-index: 999;
  bottom: 30px;
  width: 100%;
  display: flex;
  height: 37px;
  background: url("../assets/images/tip.png") no-repeat center center;
  background-size: 38px 37px;
}
.home {
  width: 100%;
  height: 100%;
  font-size: 24px;
  background: url("../assets/images/bg.jpg");
  background-size: 100% auto;
  padding: 0;
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide-1,
  .swiper-slide-2,
  .swiper-slide-3,
  .swiper-slide-4,
  .swiper-slide-5,
  .swiper-slide-6,
  .swiper-slide-7,
  .swiper-slide-8,
  .swiper-slide-9 {
    header,
    footer {
      visibility: hidden;
    }
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    header {
      margin-top: auto;
      width: 100%;
    }
    footer {
      width: 100%;
      margin-top: auto;
    }
  }
  .swiper-slide-main {
    header {
      animation-iteration-count: infinite;
      animation-duration: 4s;
      height: 614px;
      background: url("../assets/images/main-title.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      height: 494px;
      background: url("../assets/images/main-footer.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-1 {
    header {
      height: 614px;
      background: url("../assets/images/slide-1-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      height: 494px;
      background: url("../assets/images/main-footer.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-2 {
    header {
      height: 220px;
      background: url("../assets/images/slide-2-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 905px;
      background: url("../assets/images/slide-3-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-3 {
    header {
      height: 228px;
      background: url("../assets/images/slide-3-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 679px;
      background: url("../assets/images/slide-3-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-4 {
    header {
      height: 228px;
      background: url("../assets/images/slide-4-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 552px;
      background: url("../assets/images/slide-4-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-5 {
    header {
      height: 247px;
      background: url("../assets/images/slide-5-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 646px;
      background: url("../assets/images/slide-5-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-6 {
    header {
      height: 249px;
      background: url("../assets/images/slide-6-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 571px;
      background: url("../assets/images/slide-6-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-7 {
    header {
      height: 267px;
      background: url("../assets/images/slide-7-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 561px;
      background: url("../assets/images/slide-7-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-8 {
    header {
      height: 266px;
      background: url("../assets/images/slide-8-t.png") no-repeat;
      background-size: 100% 100%;
    }
    footer {
      margin: auto;
      height: 561px;
      background: url("../assets/images/slide-8-b.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .swiper-slide-9 {
    header {
      height: 868px;
      background: url("../assets/images/slide-9-t.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>

